import React,{useEffect} from 'react'
import { Space, Tag } from 'antd';
import './index.css'
import {useSelector,useDispatch} from 'react-redux'
import {closeTab,currentMenuChange,HighlightKeyChange} from '../../store/reducer/tab.js'
import { useLocation,useNavigate } from 'react-router-dom';
const CommonTag=()=>{
	const tabList=useSelector((state)=>{return state.tab.tabList})
	const currentMenu=useSelector((state)=>{return state.tab.currentMenu})
	
	
	const dispatch=useDispatch()
	// const action=useLocation()
	const navigate=useNavigate()
	const handleClose=(item,index)=>{
	let length=tabList.length-1
	dispatch(closeTab(item))
	// 关闭的不是当前的tag
   if(index===length){
		const curData=tabList[index-1]
    dispatch(currentMenuChange(curData))
		navigate(curData.path)
		dispatch(HighlightKeyChange(curData.path))
	}else{
		const curData=tabList[index+1]
    dispatch(currentMenuChange(curData))
		navigate(curData.path)
		dispatch(HighlightKeyChange(curData.path))
	}
	} 
	const handleChange=(item)=>{
		dispatch(currentMenuChange(item))
		navigate(item.path)
		dispatch(HighlightKeyChange(item.path))
		
	}
     return(
			 <Space size={[0,8]} wrap className='common-tag'>
				 {/* <Tag>tag 1</Tag>
				 <Tag closeIcon onClose={()=>{handleClose()}} color="#55acee">
					 用户列表
				</Tag> */}
				{ tabList.map((item,index)=>{
					if(item.path===currentMenu.path){
						return <Tag closeIcon  key={item.name} onClose={()=>{handleClose(item,index)}} color="#55acee">{item.label}</Tag>
					}else{
						return <Tag key={item.name} onClick={()=>{handleChange(item)}}>{item.label}</Tag>
					}
				})}
			 </Space>
		 )
}
export default CommonTag